<script setup lang="ts">
import RoleContent from './component/role-content.vue'
import RoleSearch from './component/role-search.vue'
import RoleModel from './component/role-model.vue'
import { ref } from 'vue'

// 1.绑定UserModel
const modelRef = ref<InstanceType<typeof RoleModel>>()

// 2.新建角色(子传父)
const handleCreateClick = () => {
  // 2.1调用modelRef新建角色
  modelRef.value?.showModel()
}

// 3.编辑角色（子传父携带数据）
const handleEditClick = (data: any) => {
  // 2.1调用modelRef编辑角色并将数据传送
  modelRef.value?.showModel(false, data)
}
</script>

<template>
  <div class="role">
    <RoleSearch />
    <RoleContent @handle-create-click="handleCreateClick" @handle-edit-click="handleEditClick" />
    <RoleModel ref="modelRef" />
  </div>
</template>

<style lang="less" scoped>
.role {
  width: 100%;
  height: 100%;
}
</style>
